<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
--><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta name="generator" content="joDoc">
<title>Cordova API Documentation</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width: 1024px)">
<link rel="stylesheet" type="text/css" href="prettify/prettify.css">
</head>
<body>
        <div id="header">
            <h1><a href="index.html"><strong>Cordova</strong> Documentation</a></h1>
            <small>
                <select><optgroup label="English" value="en">
<option value="edge">edge</option>
<option value="1.7.0rc1">1.7.0rc1</option>
<option selected value="1.7.0">1.7.0</option>
<option value="1.6.1">1.6.1</option>
<option value="1.6.0rc1">1.6.0rc1</option>
<option value="1.6.0">1.6.0</option>
<option value="1.5.0rc1">1.5.0rc1</option>
<option value="1.5.0">1.5.0</option>
<option value="1.4.1">1.4.1</option>
<option value="1.4.0rc1">1.4.0rc1</option>
<option value="1.4.0">1.4.0</option>
<option value="1.3.0">1.3.0</option>
<option value="1.2.0">1.2.0</option>
<option value="1.1.0">1.1.0</option>
<option value="1.0.0rc3">1.0.0rc3</option>
<option value="1.0.0rc2">1.0.0rc2</option>
<option value="1.0.0rc1">1.0.0rc1</option>
<option value="1.0.0">1.0.0</option>
<option value="0.9.6">0.9.6</option>
<option value="0.9.5.1">0.9.5.1</option>
<option value="0.9.5">0.9.5</option>
<option value="0.9.4">0.9.4</option>
<option value="0.9.3">0.9.3</option>
<option value="0.9.2">0.9.2</option>
</optgroup>
<optgroup label="Español" value="es"><option value="1.0.0">1.0.0</option></optgroup>
<optgroup label="Français" value="fr">
<option value="1.3.0">1.3.0</option>
<option value="1.2.0">1.2.0</option>
<option value="1.1.0">1.1.0</option>
</optgroup>
<optgroup label="Japanese" value="jp"><option value="0.9.5">0.9.5</option></optgroup></select></small>
        </div>
        <div id="subheader">
            <h1>Getting Started with iOS</h1>
            <small><select><option value="Getting%2520Started%2520with%2520iOS">Getting Started with iOS</option>
<option value="Getting%20Started%20with%20iOS_video_tutorials">      - Video Tutorials:</option>
<option value="Getting%20Started%20with%20iOS_1_requirements">      - 1. Requirements</option>
<option value="Getting%20Started%20with%20iOS_2_install_sdk_cordova">      - 2. Install SDK + Cordova</option>
<option value="Getting%20Started%20with%20iOS_3_setup_new_project">      - 3. Setup New Project</option>
<option value="Getting%20Started%20with%20iOS_4_hello_world">      - 4. Hello World</option>
<option value="Getting%20Started%20with%20iOS_5a_deploy_to_simulator">      - 5A. Deploy to Simulator</option>
<option value="Getting%20Started%20with%20iOS_5b_deploy_to_device">      - 5B. Deploy to Device
</option>
<option value="Getting%20Started%20with%20iOS_done">      - Done!</option></select></small>
        </div>

        <div id="sidebar">
            <div class="vertical_divider"></div>
        <h1>API Reference</h1>
<ul>
<li><a href="cordova_accelerometer_accelerometer.md.html#Accelerometer">Accelerometer</a></li>
<li><a href="cordova_camera_camera.md.html#Camera">Camera</a></li>
<li><a href="cordova_media_capture_capture.md.html#Capture">Capture</a></li>
<li><a href="cordova_compass_compass.md.html#Compass">Compass</a></li>
<li><a href="cordova_connection_connection.md.html#Connection">Connection</a></li>
<li><a href="cordova_contacts_contacts.md.html#Contacts">Contacts</a></li>
<li><a href="cordova_device_device.md.html#Device">Device</a></li>
<li><a href="cordova_events_events.md.html#Events">Events</a></li>
<li><a href="cordova_file_file.md.html#File">File</a></li>
<li><a href="cordova_geolocation_geolocation.md.html#Geolocation">Geolocation</a></li>
<li><a href="cordova_media_media.md.html#Media">Media</a></li>
<li><a href="cordova_notification_notification.md.html#Notification">Notification</a></li>
<li><a href="cordova_storage_storage.md.html#Storage">Storage</a></li>
</ul>
<h1>Guides</h1>
<ul>
<li><a href="guide_getting-started_index.md.html#Getting%20Started%20Guides">Getting Started Guides</a></li>
<li><a href="_index.html">Keyword Index</a></li>
</ul>
</div>

        <div id="scrollable">
            <div id="content">
                <h1><a name="Getting%20Started%20with%20iOS">Getting Started with iOS</a></h1>

<p>This guide describes how to set up your development environment for Cordova and run a sample application.</p>

<h2>
<a name="Getting%20Started%20with%20iOS_video_tutorials">Video Tutorials:</a>
</h2>

<ul>
<li><a class="external" href="http://www.youtube.com/v/R9zktJUN7AI?autoplay=1">Cordova Installer - Xcode 4 Template</a></li>
</ul>
<h2>
<a name="Getting%20Started%20with%20iOS_1_requirements">1. Requirements</a>
</h2>

<ul>
<li>Intel-based computer with Mac OS X Lion (10.7)</li>
<li>Necessary for Installing on <a href="cordova_device_device.md.html#Device">Device</a>:
<ul>
<li>An Apple iOS device (iPhone, iPad, iPod Touch)</li>
<li>iOS ceveloper certification</li>
</ul>
</li>
</ul>
<h2>
<a name="Getting%20Started%20with%20iOS_2_install_sdk_cordova">2. Install SDK + Cordova</a>
</h2>

<ul>
<li>Install Xcode from the <a class="external" href="http://itunes.apple.com/us/app/xcode/id497799835?mt=12">Mac App Store</a> </li>
<li>Donwload the latest copy of <a class="external" href="http://phonegap.com/download">Cordova</a> and extract its contents. We will be working with the <strong>lib/ios</strong> directory.</li>
</ul>
<h2>
<a name="Getting%20Started%20with%20iOS_3_setup_new_project">3. Setup New Project</a>
</h2>

<ul>
<li>Launch Xcode</li>
<li>Select the <strong><a href="cordova_file_file.md.html#File">File</a></strong> menu</li>
<li>Select <strong>New</strong>, then <strong>New Project...</strong>
</li>
<li>
<p>Select <strong>Cordova-based Application</strong> from the list of templates</p>

<p><img src="img/guide/getting-started/ios/XCode4-templates.png" alt="" title=""></p>
</li>
<li>Select the <strong>Next</strong> button</li>
<li>
<p>Fill in the "Product Name" &amp; "Company Identifier" for your app</p>

<p><img src="img/guide/getting-started/ios/xcode4-name_your_app.png" alt="" title=""></p>
</li>
<li><p><strong>IMPORTANT! DO NOT CHECK</strong> the "Use Automatic Reference Counting" checkbox </p></li>
<li>Select the <strong>Next</strong> button</li>
<li>
<strong>Choose a folder</strong> to save your new app in</li>
<li>Select the <strong>Create</strong> button, this will create your project</li>
<li>
<p>Select the <strong>Run</strong> button in the top left corner. Your build should succeed and launch in the iOS Simulator</p>

<p>a. You should see an error in the iOS Simulator informing you that <strong>www/index.html</strong> was not found</p>

<p>b. To fix this, we need to add a folder reference to the <strong>www</strong> directory into the project. </p>

<p><img src="img/guide/getting-started/ios/index-not-found.png" alt="" title=""></p>
</li>
<li><p><strong>Right-click</strong> on the project icon in the Project Navigator (left sidebar) and select <strong>Show in Finder</strong></p></li>
<li>
<p><strong>In the Finder</strong>, you should see the <strong>www</strong> directory beside your project</p>

<p><img src="img/guide/getting-started/ios/www-folder.png" alt="" title=""></p>
</li>
<li>
<p><strong>IMPORTANT</strong>! <strong>Drag</strong> the <strong>www</strong> folder into Xcode 4. <strong>Don't</strong> drag the www folder into your app's folder. <strong>It needs to be dragged into Xcode 4.</strong> For example, you would drag and drop it on the <strong>highlighted red section</strong> of the HelloWorld project shown below.</p>

<p><img src="img/guide/getting-started/ios/project.jpg" alt="" title=""></p>
</li>
<li>A window sheet should slide down with a few options, after the <strong>"www"</strong> folder has been dragged and dropped into the project. </li>
<li>
<p>Select the radio-button <strong>Create folder references for any added folders</strong>.</p>

<p><img src="img/guide/getting-started/ios/create-folder-reference.png" alt="" title=""></p>
</li>
<li><p>Select the <strong>Finish</strong> button</p></li>
</ul>
<h2>
<a name="Getting%20Started%20with%20iOS_4_hello_world">4. Hello World</a>
</h2>

<ul>
<li>Select the folder named <strong>www</strong> in your Project Navigator in Xcode</li>
<li>Select the <strong>index.html</strong> file</li>
<li>Type <code>&lt;h1&gt;Hello World&lt;/h1&gt;</code> after the <code>&lt;body&gt;</code> tag</li>
</ul>
<p>You can also add any associated JavaScript and CSS files there as well.</p>

<h2>
<a name="Getting%20Started%20with%20iOS_5a_deploy_to_simulator">5A. Deploy to Simulator</a>
</h2>

<ul>
<li>Change the Active SDK in the Scheme drop-down menu on the toolbar to <strong>iOS version# Simulator</strong>.</li>
<li>Select the <strong>Run</strong> button in your project window's toolbar</li>
</ul>
<h2>
<a name="Getting%20Started%20with%20iOS_5b_deploy_to_device">5B. Deploy to Device
</a>
</h2>

<ul>
<li>Open [AppName]-Info.plist (where [AppName] is your application's name), under the "Supporting Files" group</li>
<li>Change <strong>BundleIdentifier</strong> to the identifier provided by Apple, or your own bundle identifier. If you have a developer license, you can access and run the Assistant <a class="external" href="http://developer.apple.com/iphone/manage/overview/index.action">here</a> and register your app.</li>
<li>Change the Active SDK in the Scheme drop-down menu on the toolbar to <strong>[DEVICENAME]</strong> where [DEVICENAME] is the name of the device you want to deploy to.</li>
<li>
<p>Select the <strong>Run</strong> button in your project window's toolbar</p>

<p><img src="img/guide/getting-started/ios/HelloWorldiPhone4.png" alt="" title=""></p>
</li>
</ul>
<h2>
<a name="Getting%20Started%20with%20iOS_done">Done!</a>
</h2>

<p>Add more HTML, CSS and JavaScript to your <strong>www</strong> folder outside of Xcode, your file additions will be picked up automatically inside Xcode.</p>

            </div>
        </div>

        <!-- Functionality and Syntax Highlighting -->
        <script type="text/javascript" src="index.js"></script><script type="text/javascript" src="prettify/prettify.js"></script>
</body>
</html>
